<template>
  <div class="form-input">
    <el-input class="input" v-for="(item, index) in nameList" v-model="nameList[index]" :placeholder="`多选框${index + 1}`"
      @change="updateValue"></el-input>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  size: {
    type: Number,
    default: 1
  },
  modelValue: {
    type: Array,
    default: ['']
  }
})
const emit = defineEmits(['update:modelValue'])

const nameList = ref([''])

//更新输入框
watch(() => props.size, (newValue, oldValue) => {
  if (newValue > oldValue) {
    for (let i = oldValue; i < newValue; i++) {
      nameList.value.push('')
    }
  } else if (newValue < oldValue) {
    nameList.value = nameList.value.slice(0, newValue)
  }

})

watch(() => props.modelValue, (newValue) => {
  nameList.value = newValue
}, {
  deep: true,
  immediate: true
})

const updateValue = (e) => {
  emit('update:modelValue', nameList.value)
}

</script>

<style lang="scss" scoped>
.form-input {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;

  .input {
    width: 140px;
  }
}
</style>